<template></template
><template>
    <div class="app-container">
        <!-- <el-tabs v-model="captainListTabModal" type="card" @tab-click="handleChangeTab"> -->
        <!-- <el-tab-pane label="团长列表" name="list"> -->
        <el-card class="filter-container" shadow="never">
            <el-row>
                <i class="el-icon-search"></i>
                <span>筛选搜索</span>
            </el-row>
            <el-row class="row-margin">
                <el-form :model="listQuery1" ref="filterFormRef1" inline>
                    <el-form-item prop="isBindedMobile">
                        <el-select v-model="listQuery1.isBindedMobile" placeholder="绑定手机号">
                            <el-option
                                v-for="item in phoneList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="searchWords">
                        <el-input
                            clearable
                            placeholder="会员名称/手机号"
                            v-model="listQuery1.searchWords"
                        ></el-input>
                    </el-form-item>
                    <el-form-item prop="headId">
                        <el-select v-model="listQuery1.headId" placeholder="关联团长">
                            <el-option
                                v-for="item in captainDataList1"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button style="margin-left: 10px;" @click="queryVipList" type="primary"
                            >查询</el-button
                        >

                        <el-button
                            @click="handleSuperSearchButton"
                            :type="superSearchFlag ? 'danger' : 'primary'"
                            >{{ superSearchFlag ? '收起高级搜索' : '高级搜索' }}</el-button
                        >
                        <el-button @click="handleResetVipSearch">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-row>
            <el-card class="super-search-card" shadow="never" v-show="superSearchFlag">
                <!-- <el-row class="row-margin"> -->

                <el-form :model="superSearchQuery" ref="superSearchForm" inline :rules="rules">
                    <el-row type="flex" justify="start" class="item-margin">
                        <!-- <el-col> -->
                        <el-form-item prop="TotalOrderAmount" label="消费金额">
                            <el-input
                                class="from-to-input"
                                type="number"
                                v-model.number="superSearchQuery.startTotalOrderAmount"
                            >
                                <span slot="append">元</span>
                            </el-input>

                            <span>——</span>

                            <el-input
                                class="from-to-input"
                                type="number"
                                v-model.number="superSearchQuery.endTotalOrderAmount"
                            >
                                <span slot="append">元</span>
                            </el-input>
                        </el-form-item>
                        <!-- </el-col> -->
                        <!-- <el-col> -->
                        <el-form-item prop="OrderTimes" label="下单次数">
                            <el-input
                                class="from-to-input"
                                type="number"
                                v-model.number="superSearchQuery.startOrderTimes"
                            >
                                <span slot="append">次</span>
                            </el-input>

                            <span>——</span>

                            <el-input
                                class="from-to-input"
                                type="number"
                                v-model.number="superSearchQuery.endOrderTimes"
                            >
                                <span slot="append">次</span>
                            </el-input>
                        </el-form-item>
                        <!-- </el-col>
            <el-col>-->
                        <el-form-item prop="TotalRefundAmount" label="退款金额">
                            <el-input
                                class="from-to-input"
                                type="number"
                                v-model.number="superSearchQuery.startTotalRefundAmount"
                            >
                                <span class="from-to-input" type="number" slot="append">元</span>
                            </el-input>

                            <span>——</span>

                            <el-input
                                class="from-to-input"
                                type="number"
                                v-model.number="superSearchQuery.endTotalRefundAmount"
                            >
                                <span slot="append">元</span>
                            </el-input>
                        </el-form-item>
                        <!-- </el-col> -->
                    </el-row>
                    <el-row class="item-margin">
                        <el-form-item prop="RefundTimes" label="退货次数">
                            <el-input
                                class="from-to-input"
                                type="number"
                                v-model.number="superSearchQuery.startRefundTimes"
                            >
                                <span class="from-to-input" slot="append">元</span>
                            </el-input>

                            <span>——</span>

                            <el-input
                                class="from-to-input"
                                type="number"
                                v-model.number="superSearchQuery.endRefundTimes"
                            >
                                <span slot="append">元</span>
                            </el-input>
                        </el-form-item>

                        <el-form-item prop="orderTime" label="下单日期">
                            <el-date-picker
                                v-model="superSearchQuery.orderTime"
                                type="datetimerange"
                                range-separator="-"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                            ></el-date-picker>
                        </el-form-item>

                        <el-form-item prop="registerTime" label="注册日期">
                            <el-date-picker
                                v-model="superSearchQuery.registerTime"
                                type="datetimerange"
                                range-separator="-"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                            ></el-date-picker>
                        </el-form-item>
                    </el-row>
                    <el-form-item>
                        <el-button style="margin-left: 10px;" @click="queryVipList" type="primary"
                            >查询</el-button
                        >
                        <el-button @click="handleResetSuperVipSearch">清空</el-button>
                    </el-form-item>
                </el-form>
                <!-- </el-row> -->
            </el-card>
        </el-card>
        <div class="table-container">
            <el-table
                ref="vipUser"
                :data="vipUserList"
                style="width: 100%"
                v-loading="listLoading1"
                border
            >
                <el-table-column label="会员信息" width="100" align="center">
                    <template slot-scope="scope">
                        <div>
                            <el-avatar :src="scope.row.headPicUrl">{{ scope.row.name }}</el-avatar>
                        </div>
                        {{ scope.row.name }}
                    </template>
                </el-table-column>
                <el-table-column label="手机号码" width="200" align="center">
                    <template slot-scope="scope">{{ scope.row.mobile }}</template>
                </el-table-column>
                <el-table-column label="下单次数" width="150" align="center">
                    <template slot-scope="scope">{{ scope.row.orderTimes }}</template>
                </el-table-column>
                <el-table-column label="消费金额" width="160" align="center">
                    <template slot-scope="scope">{{ scope.row.totalOrderAmount }}</template>
                </el-table-column>
                <el-table-column label="退款次数" width="150" align="center">
                    <template slot-scope="scope">{{ scope.row.refundTimes }}</template>
                </el-table-column>
                <el-table-column label="退款金额" width="170" align="center">
                    <template slot-scope="scope">{{ scope.row.totalRefundAmount }}</template>
                </el-table-column>
                <el-table-column label="注册时间" width="250" align="center">
                    <template slot-scope="scope">{{ scope.row.createTime }}</template>
                </el-table-column>
                <el-table-column label="最近消费时间" width="250" align="center">
                    <template slot-scope="scope">{{ scope.row.lastOrderTime }}</template>
                </el-table-column>
                <el-table-column label="关联团长" width="250" align="center">
                    <template slot-scope="scope">{{
                        scope.row.bindedHeads ? scope.row.bindedHeads.name : ''
                    }}</template>
                </el-table-column>
            </el-table>
        </div>
        <div class="pagination-container">
            <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                layout="total, sizes,prev, pager, next,jumper"
                :page-size="listQuery1.pageSize"
                :page-sizes="[5, 10, 15]"
                :current-page.sync="listQuery1.pageNum"
                :total="total1"
            ></el-pagination>
        </div>
    </div>
</template>
<script>
import { getVipList, getCaptainQueryList } from '@/api/vip';
import PopConfirm from '@/components/PopConfirm/popConfirm';
import { formatDate } from '@/utils/date';
const defaultListQuery = {
    pageNum: 1,
    pageSize: 5,
    mobile: 1
};
export default {
    name: 'vip',
    components: {
        PopConfirm
    },
    data() {
        var validateFromTo = (rule,value, callback) =>{
            let from = this.superSearchQuery['start'+rule.field];
            let to = this.superSearchQuery['end'+rule.field];
            if (from != null || to != null) {
                if (from!=null && to !=null) {
                    if (from >= to) {
                        callback(Error('请保证开始数值小于结束数值'))
                    }
                    callback()
                }
                callback('请将信息填写完整')
            }
            callback()
        }
        return {
            nameSearchInput: '',
            captainListTabModal: 'list',
            captainDataList1: [],
            captainDataList2: [],
            vipUserList: [],
            listLoading1: false,
            listLoading2: false,
            listQuery1: Object.assign({}, defaultListQuery),
            listQuery2: Object.assign({}, defaultListQuery),
            total1: 0,
            total2: 0,
            phoneList: [
                { id: 'OFF', name: '未绑定手机号' },
                { id: 'ON', name: '绑定手机号' }
            ],
            captainList: [],
            superSearchFlag: false,
            superSearchQuery: {},
            rules: {
                TotalOrderAmount: [{ validator: validateFromTo, trigger: 'change' }],
                TotalRefundAmount: [
                    { validator: validateFromTo, trigger: 'change' }
                ],
                RefundTimes: [{ validator: validateFromTo, trigger: 'change' }],
                OrderTimes: [{ validator: validateFromTo, trigger: 'change' }]
            }
        };
    },
    created() {
        this.getCaptainList();
        this.withOutValidateQueryList();
    },
    watch: {},
    filters: {},
    methods: {
        handleSuperSearchButton() {
            this.superSearchFlag = !this.superSearchFlag;
        },
        getCaptainList() {
            getCaptainQueryList({}).then(res => {
                if (res.data.success) {
                    this.captainDataList1 = res.data.data;
                } else {
                    this.$message({
                        message: res.data.msg,
                        type: 'error',
                        duration: 3000
                    });
                }
            });
        },
        getRequestParams() {
            let superParam = { ...this.superSearchQuery };
            if (superParam.orderTime) {
                superParam.startLastOrderTime = formatDate(
                    superParam.orderTime[0],
                    'yyyy-MM-dd hh:mm:ss'
                );
                superParam.endLastOrderTime = formatDate(
                    superParam.orderTime[1],
                    'yyyy-MM-dd hh:mm:ss'
                );
            }
            if (superParam.registerTime) {
                superParam.startRegisterTime = formatDate(
                    superParam.registerTime[0],
                    'yyyy-MM-dd hh:mm:ss'
                );
                superParam.endRegisterTime = formatDate(
                    superParam.registerTime[1],
                    'yyyy-MM-dd hh:mm:ss'
                );
            }
            delete superParam.orderTime;
            delete superParam.registerTime;
            let requestData = this.superSearchFlag
                ? { ...this.listQuery1, ...superParam }
                : this.listQuery1;
            return requestData;
        },
        withOutValidateQueryList() {
            let requestData = this.getRequestParams();
            getVipList(requestData).then(res => {
                if (res.data.success == true) {
                    this.vipUserList = res.data.data;
                    if (!(this.vipUserList instanceof Array)) {
                        this.vipUserList = [];
                    }
                } else {
                    this.message.eror(res.data.msg);
                }
            });
        },
        queryVipList() {
            this.$refs['superSearchForm'].validate(res => {
                if (res) {
                    this.withOutValidateQueryList();
                } else {
                    this.$message.error('请填入正确的信息');
                }
            });
        },
        handleResetVipSearch() {
            this.$refs.filterFormRef1.resetFields();
        },
        handleResetSuperVipSearch() {
            this.superSearchQuery = {};
        },
        handleSizeChange(val) {
            this.listQuery1.pageNum = 1;
            this.listQuery1.pageSize = val;
            this.queryVipList();
        },
        handleCurrentChange(val) {
            this.listQuery1.pageNum = val;
            this.queryVipList();
        }
    }
};
</script>
<style scoped lang="scss">
.from-to-input {
    width: 150px;
}
.item-margin {
    .el-form-item {
        margin-right: 50px;
    }
}
.super-search-card {
    background: rgba($color: #000000, $alpha: 0.05);
}
</style>

<style lang="scss"></style>
